<template>
	<div>
		<van-nav-bar title="文章发布" placeholder fixed />
	</div>
	<van-cell-group inset>
		<van-field v-model="title" clearable placeholder="请输入文章标题">
			<template #button>
				<van-button size="small" type="primary" @click="send()">发布</van-button>
			</template>
		</van-field>
		<van-field v-model="content" rows="2" autosize label="文章内容" type="textarea" maxlength="500" placeholder="请输入文章内容" show-word-limit />
	</van-cell-group>
	<hr />
	<ul>
		<li v-for="(item, index) in arrReverse" :key="index">
			<van-cell-group inset>
				<van-field v-model="item.title" label="文章名" />
				<van-field v-model="item.content" label="文章内容" />
			</van-cell-group>
			<p></p>
		</li>
	</ul>
</template>

<script setup>
	import http from '@/utils/request';
	import { ref } from 'vue';
	let title = ref('');
	let content = ref('');
	let status = ref(false);

	function send() {
		http({
			url: '/posts',
			method: 'post',
			data: {
				title: title.value,
				content: content.value,
				status: status.value,
			},
		}).then((r) => {
			console.log(r.data);
			title.value = '';
			content.value = '';
			status.value = '';
			loadList();
		});
	}
	const listArr = ref([]);
	const arrReverse = ref([]);
	function loadList() {
		http({
			url: '/posts',
			method: 'get',
		}).then((r) => {
			console.log(r.data);
			listArr.value = r.data;
			arrReverse.value = listArr.value.reverse();
		});
	}
	loadList();
</script>

<style scoped lang="scss">
	.van-tag--primary.van-tag--plain {
		color: black;
		font-size: 20px;
	}
</style>
